<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('规则列表')" />
    <title></title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">

    <style>
        .rule-item {
            display: block;
            overflow: hidden;
        }
        .div-margin {
            margin: 5px 0
        }
    </style>
</head>
<body class="bg-white">
        <form id="inputForm" modelAttribute="intentionCondition" class="form-horizontal">
            <div class="form-group" id="partBox">
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <input type="button" class="btn btn-default" onclick="copyAdd()" value="添加"/>
                </div>
            </div>

    </form>
</body>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var bbsSigninRuleList = [[${bbsSigninRuleList}]];
    var prefix = ctx + "system/rule";
    $(document).ready(function() {
        if(bbsSigninRuleList.length>0){
            //编辑
            for(var key in bbsSigninRuleList) {
                var className = copyAdd()
                var operObj= $("."+className).find("[name='symbol']")
                var singleJson=bbsSigninRuleList[key]
                operObj.val(singleJson.symbol)
                //当前点击的最外层
                var $parent = operObj.parent().parent().parent().parent();
                //清除上次点击添加的元素
                $parent.find(".rule-part2").html("")
                $parent.find(".rule-part3").html("")
                var midValue = document.querySelector('#midValue').innerHTML
                var $midValue = $(midValue)
                $midValue.find("[name='conditionValue']").val(singleJson.conditionValue)
                $parent.find('.rule-part2').append($midValue)
                var templateValue = document.querySelector('#value').innerHTML
                var $value = $(templateValue)
                $value.find("[name='reward']").val(singleJson.reward)
                if(index==1){
                    $parent.find("label:last").text("奖励")
                }else{
                    $value.append(document.querySelector('#deleteElement').innerHTML)
                }
                $parent.find('.rule-part3').append($value)
            }
        } else {
            //新增
            copyAdd()
        }
    });
    function showDeleteBtn(x) {
        $(x).find(".mouse-move-show").css('display', 'inline');
    }

    function hiddenDeleteBtn(x) {
        $(x).find(".mouse-move-show").css('display', 'none');
    }

    function deleteNow(x) {
        $(x).parent().parent().parent().parent().remove()
    }
    function submitHandler() {
        var arr = []
        var selectFlag = true;
        $(".rule-item").each(function (index,el) {
            var idData = $(el).find("[name='symbol']").val()
            var conditionValue = $(el).find("[name='conditionValue']").val()
            var reward = $(el).find("[name='reward']").val()
            var json = {}
            if (idData&&conditionValue&&reward) {
                json.signRuleId=index+1;
                json.symbol = idData
                json.conditionValue = conditionValue
                json.reward = reward
            }else{
                selectFlag = false;
            }
            arr.push(json)
        })
        if (!selectFlag) {
            if (arr.length == 1) {
                $.modal.alertError("至少设置一个条件!");
            } else {
                $.modal.alertError("不能存在空白条件!");
            }
            return false
        }
        console.log(arr)
        var config = {
            url: prefix+"/signIn",
            type: "post",
            dataType: "json",
            data: {signInRule:encodeURIComponent(JSON.stringify(arr))},
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
                $.modal.disable();
            },
            success: function(result) {
                if (typeof callback == "function") {
                    callback(result);
                }
                $.operate.successCallback(result);
            }
        };
        $.ajax(config)

    }
    // function save() {
    //
    //     // var sceneId = $("#sceneId").val();
    //     // var id = $("#id").val();
    //     // var data = {
    //     //     "sceneId": sceneId,
    //     //     "conditionData": encodeURIComponent(JSON.stringify(arr)),
    //     //     "id": id,
    //     // }
    //     // if (!isValidate) {
    //     //     return false;
    //     // }else{
    //     //     jp.loading();
    //     //     // $.ajax({
    //     //     //     url: "${ctx}/intentioncondition/intentionCondition/save",
    //     //     //     method: "post",
    //     //     //     data: data,
    //     //     //     async:false,
    //     //     //     success:function(data){
    //     //     //         if(data.success){
    //     //     //             refl=10;
    //     //     //             // jp.getParent().refresh();
    //     //     //             var dialogIndex = parent.layer.getFrameIndex(window.name); // 获取窗口索引
    //     //     //             parent.layer.close(dialogIndex);
    //     //     //             jp.success(data.msg)
    //     //     //         }else{
    //     //     //             jp.error(data.msg);
    //     //     //         }
    //     //     //     }
    //     //     // })
    //     // }
    //
    // }

    var index = 0;
    function copyAdd() {
        var s = document.querySelector('#ruleItem').innerHTML
        var template = $(s);
        index++
        var className = "numberRecord" + index;
        if (index == 1) {
            template.find("label:first").text("连续天数")
        }
        template.attr("class", className + " div-margin")
        $("#partBox").append(template)
        $("." + className).find("[name='symbol']").change(function () {
            //当前点击的最外层
            var $parent = $(this).parent().parent().parent().parent();
            //清除上次点击添加的元素
            $parent.find(".rule-part2").html("")
            $parent.find(".rule-part3").html("")
            var midValue = document.querySelector('#midValue').innerHTML
            var $midValue = $(midValue)
            $parent.find('.rule-part2').append($midValue)
            var templateValue = document.querySelector('#value').innerHTML
            var $value = $(templateValue)
            if(index==1){
                $parent.find("label:last").text("奖励")
            }else{
                $value.append(document.querySelector('#deleteElement').innerHTML)
            }
            $parent.find('.rule-part3').append($value)
        });
        return className;
    }
    function dislodgeNegative(str){
        str.value=str.value.replace(/[^\.\d]/g,'');
        str.value=str.value.replace('.','');
    }

</script>
<script type="text/template" id="deleteElement">
    <i class="mouse-move-show glyphicon glyphicon-remove" onclick="deleteNow(this)" style="display:none;"></i>
</script>
<script type="text/template" id="midValue">
    <div class="col-sm-2">
        <input type="number" onKeyUp="dislodgeNegative(this)" min="0" max="9999" name="conditionValue" class="form-control" >
    </div>
</script>
<script type="text/template" id="value">

    <div class="form-inline">
        <input type="number" onKeyUp="dislodgeNegative(this)" min="0" max="9999" name="reward" class="form-control" ><span></span>
    </div>
</script>
<script type="text/template" id="ruleItem">
    <div class="numberRecord">
        <label class="col-sm-2 control-label"></label>
        <div class="rule-item" onmouseover="showDeleteBtn(this)" onmouseout="hiddenDeleteBtn(this)">
            <div class="rule-part1">
                <div class="col-sm-2" id="changeId">
                    <select name="symbol" class="form-control">
                        <option value="" style="display: none"></option>
                        <option value=">">></option>
                        <option value=">=">>=</option>
                        <option value="=">=</option>
                        <option value="<"><</option>
                        <option value="<="><=</option>
                    </select>
                </div>
            </div>
            <div class="rule-part2">

            </div>
            <label class="col-sm-2 control-label "></label>
            <div class="rule-part3">

            </div>
        </div>
    </div>
</script>
</html>

